<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审核景点管理</title>
    <!--引入vue.js库-->
    <script src="/js/vue.js"></script>
    <!--element-ui引入样式 展示数据的 基于vue-->
    <link rel="stylesheet" href="/css/index.css">
    <!--element-ui引入组件库-->
    <script src="/js/index.js"></script>
    <!--引入axios库 从后端获取数据，实现异步请求， 基于promise -->
    <script src="/js/axios.min.js"></script>
</head>
<!--初始化的两种方式:1.在body标签上添加onload属性  2.使用jq进行初始化使用$(function(){});-->
<body>
<!--vue必须绑定的根标签-->
<div id="app">
    <!--搜素，对应后端的模糊查询 gutter="20"每个布局之间的距离-->
    <el-row :gutter="20">
        <el-col :span="5">
            <!--v-model:双向绑定值的 这里如果要查询的输入框太多，每个输入框都要绑定值，
                就会很麻烦，这里我们可以将这些封装到一个对象中 searchForm对象名 deptName：对象中的属性名-->
            <el-input  v-model="searchForm.name" placeholder="请输入景点名称" size="small"></el-input>
        </el-col>
        <el-col :span="2">
            <el-select style="width: 130px" v-model="value" size="small" placeholder="审核状态">
                <el-option
                        v-for="item in options"
                        :key="item.shState"
                        :label="item.name"
                        :value="item.shState">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
            <!--value-format="yyyy-MM-dd" :时间格式化属性 格式化前:2023-03-28T16:00:00.000Z 格式化后显示2023-03-29 -->
            <el-date-picker
                    v-model="searchForm.shTime"
                    type="date"
                    placeholder="请选择审核时间"
                    value-format="yyyy-MM-dd"
                    size="small">
            </el-date-picker>
        </el-col>
        <el-col :span="13">
            <!--type="primary 主要的/ success 成功的 / warning 警告 / danger危险 / info 信息/ text普通的"-->
            <!--icon:图标  @click="search" 绑定点击事件 点击调用搜索方法-->
            <el-button type="success" icon="el-icon-search" @click="search" size="small">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="refresh" size="small">刷新</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            &nbsp;
        </el-col>
    </el-row>
    <!--table数据  ":"相当于v-bind，动态赋值-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <!--表示一列 prop与下面tableData中的属性名对应 label相当于表头 width宽度-->
        <el-table-column
                prop="tmScenic.name"
                label="景区名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="景点名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sdot"
                label="景点图片"
                width="180">
            <template slot-scope="scope">
                <el-image
                        style="width: 150px; height: 115px"
                        :src="scope.row.sdot"
                ></el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="summary"
                label="简述"
                width="300">
        </el-table-column>
        <el-table-column
                prop="bgTime"
                label="变更人时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="user.userName"
                label="变更人"
                width="110">
        </el-table-column>
        <el-table-column
                prop="shState"
                label="审核状态"
                :formatter="auditState"
                width="110">
        </el-table-column>
        <el-table-column
                prop="shTime"
                label="审核时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="userA.userName"
                label="审核人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="shMs"
                label="描述"
                width="180">
        </el-table-column>
        <el-table-column
                prop="isAuto"
                label="是否自动"
                :formatter="isAuto">
        </el-table-column>
        <!--        <el-table-column-->
        <!--                prop="delState"-->
        <!--                label="删除状态"-->
        <!--                :formatter="delState">-->
        <!--        </el-table-column>-->
        <el-table-column
                prop="delTime"
                label="删除时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="userB.userName"
                label="删除人">
        </el-table-column>
        <el-table-column
                prop="isHistory"
                label="是否是历史版本"
                :formatter="isHistory">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <!--相当于父子组件中的props-->
            <template slot-scope="scope">
                <!--scope.$index “要处理数据的行标”, scope.row "要处理的这行数据"-->
                <el-button
                        size="small"
                        type="success"
                        @click="handleEdit(scope.$index, scope.row)">审核</el-button>
                <!--                <el-button-->
                <!--                        size="mini"-->
                <!--                        type="danger"-->
                <!--                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <!--分页功能 完整型  "@"相当于”v-on“ 绑定事件 size-change关键字不能动
        handleSizeChange:方法名 currentPage:"页码"属性名动态传参
        page-sizes:存放每页显示几条，下拉框中的数值 page-size:表示下拉框中的默认值，页面刚打开是，会以默认值显示条数
        layout:布局 如果想要改变布局，可以去掉响应的参数就可以了 (total:对应页面的数据总数量 sizes:对应页面的每页显示条数
        prev:对应页面的前一页 pager:对应页面的页码 next:对应页面的下一页 jumper:对应页面的前往第几页)
        total:表示查询到数据的总数量 应该是动态赋值-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,5,10,15,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalA">
    </el-pagination>
</div>
<script>
    //js代码
    var vue=new Vue({
        el:"#app",
        //data:{}是用于存放使用的所有属性数据，今天这样写照样用，但是今天要实现一个表单校验，不写官网中的格式好像没办法玩
        data(){
            return{//这样写的原因是方便编写表单校验
                tableData:[],//表格数据参数名
                currentPage:1,//页码（显示第几页）
                pageSize:5,//默认每页显示几条，要和上面数组中的某一个值对应
                totalA:100,
                searchForm:{name:'',jbCode:'',auditTime:'',delState:''},//封装查询条件对象
                dialogFormVisible:false, //是否显示对话框，false:不显示 true:显示
                form:{
                    id:'',shState:'',shMs:'',isAuto:'',bgrId:'',shrId:'',shTime:'',delrId:'',delTime:''
                },//from对象，更新或者添加输入框中的值
                formLabelWidth: '120px',//名称的宽度
                options:[{shState:'-1',name:'未审核'},{shState:'1',name:'合格'},{shState:'0',name:'不合格'}],
                value:''
            }
        },
        created:function(){//第三种初始化方法:页面初始化时，需要执行的业务可以放入该方法中，
            /*将查询到的结果先放到页面上*/
            //调用封装的加载数据方法（后端对应着分页查询方法）
            this.loadData();
        },
        methods: {//存放所有使用的方法（函数）
            //封装请求数据的方法
            loadData() {
                var thisVue = this;//将当前vue对象等于VueThis变量
                this.searchForm.shState=this.value
                //使用axios向后台发请求，先找到后台对应的方法是什么请求，然后再去官网上找到对应的请求格式，cv
                axios.post('/tmscenicdot/page',//请求的url
                    //请求参数，要求JSON格式
                    {
                        "pageNo": this.currentPage,
                        "pageSize": this.pageSize,
                        "data":this.searchForm
                    }
                ).then(function (response) {//.then回调函数
                    //前端控制台打印 response返回的是JSON对象 ，这里可以将对象转为字符串，更加方便的看到数据
                    // console.log(response);
                    console.log(JSON.stringify(response));
                    //response获取后台数据时，一定要加data 相当于从响应的身体（body）里拿数据，
                    // 并且获取的是整个JSON文件，如果要拿里面的查询到的数据,先判断拿到的数据状态码是否是200
                    if (response.data.code == 200) {
                        //如果是200，获取到查询的数据 这里面直接写this指向的是当前axios对象 就不是vue对象了
                        thisVue.tableData = response.data.data.list; //给tableData属性赋值
                        //从后端获取查询到的总页数,并将值赋给变量totalA
                        thisVue.totalA = response.data.data.total;
                    }
                }).catch(function (error) {//异常处理
                    console.log(error);
                });
            },
            //每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                //调用加载数据方法（后端对应着分页查询方法）
                this.pageSize = val;
                this.loadData();
            },
            //页码发生变化（第几页）
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                //调用加载数据方法（后端对应着分页查询方法）
                this.currentPage = val;
                this.loadData();
            },
            //搜索方法 不用传参，因为是双向绑定
            search() {
                this.loadData();
            },
            //刷新方法
            refresh(){
                location.reload();
            },
            isTodayShow(row, column, cellValue, index){
                var returnValue='';
                if (cellValue=='0'){
                    returnValue="是";
                }else{
                    returnValue="否";
                }
                return returnValue;
            },
            //是否上线
            isLine(row, column, cellValue, index){
                var returnValue='';
                if (cellValue=='0'){
                    returnValue="是";
                }else{
                    returnValue="否";
                }
                return returnValue;
            },
            //审核状态
            auditState(row, column, cellValue, index){
                var returnValue='';
                if(cellValue=='0'){
                    returnValue="不合格";
                }else if(cellValue=='1'){
                    returnValue="合格"
                }else{
                    returnValue="未审核";
                }
                return returnValue;
            },
            //是否自动
            isAuto(row, column, cellValue, index){
                var returnValue='';
                if (cellValue=='0'){
                    returnValue="是";
                }else if(cellValue=='1'){
                    returnValue="否";
                }
                return returnValue;
            },
            // //删除状态
            // delState(row, column, cellValue, index){
            //     var returnValue='';
            //     if (cellValue=='0'){
            //         returnValue="已删除";
            //     }else{
            //         returnValue="未删除";
            //     }
            //     return returnValue;
            // },
            //是否是历史版本
            isHistory(row, column, cellValue, index){
                var returnValue='';
                if (cellValue=='0'){
                    returnValue="是";
                }else if(cellValue=='1'){
                    returnValue="否";
                }
                return returnValue;
            },
            //处理文件成功后的回调方法
            handleFileSuccess(res, file) {
                //回显上传图片
                this.imageUrl = URL.createObjectURL(file.raw);
                //打印弹出file
                this.form.sdot = file.response.data.filePath;
            }
        }
    })
</script>
</body>
</html>